import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:namewava/jc_rote_path.dart';
import 'package:namewava/utils/jc_global.dart';
import 'package:namewava/utils/jc_image_path.dart';
import 'package:namewava/utils/jc_screenutil_info.dart';
import 'package:namewava/utils/jc_text_style.dart';
import 'package:namewava/utils/js_request.dart';
import 'package:notification_centre/notification_centre.dart';

class JcDiceProblem extends StatefulWidget {
  const JcDiceProblem(
      {super.key,
      required this.nextTap,
      required this.p,
      required this.freeCount,
      required this.myCoins});
  final Function nextTap;
  final Map p;
  final int freeCount;
  final int myCoins;
  @override
  State<JcDiceProblem> createState() => _JcDiceProblemState();
}

class _JcDiceProblemState extends State<JcDiceProblem> {
  String? interests = '';
  String? traits = '';
  RxString networkName = ''.obs;
  RxString particularlyName = ''.obs;
  RxString longName = ''.obs;
  @override
  void initState() {
    super.initState();
    networkName.value = widget.p['networkName'];
    particularlyName.value = widget.p['particularlyName'];
    longName.value = widget.p['longName'];
    interests = widget.p['interests'];
    traits = widget.p['traits'];
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Container(
        width: 336.w,
        padding:
            EdgeInsets.only(left: 15.w, right: 15.w, top: 24.h, bottom: 50.h),
        constraints: BoxConstraints(minHeight: 728.h),
        margin: EdgeInsets.only(bottom: 100 + JcScreenutilInfo.bottomBarHeight),
        decoration: const BoxDecoration(
            // color: Colors.red
            image: DecorationImage(
                image: AssetImage(JcImagePath.jcDiceProblemBg),
                fit: BoxFit.fill)),
        child: Column(
          children: [
            _titleWidget(),
            SizedBox(
              height: 35.h,
            ),
            _inputWidget(0),
            SizedBox(
              height: 10.h,
            ),
            _inputWidget(1),
            _optionWidget(0),
            _optionWidget(1),
            _optionWidget(2),
            SizedBox(
              height: 60.h,
            ),
            _generateWidget()
          ],
        ),
      ),
      onTap: () {
        FocusScope.of(context).requestFocus(FocusNode());
      },
    );
  }

  _titleWidget() {
    return Text(
      'Hey everyone， \nwelcome to NameWave！',
      textAlign: TextAlign.center,
      style: JcTextStyle.poetsenOneRegularTextStyle(24.sp, Colors.white),
    );
  }

  _inputWidget(int type) {
    return Column(
      children: [
        Container(
          margin: EdgeInsets.only(top: 5.h, bottom: 14.h),
          alignment: Alignment.centerLeft,
          child: Text(
            type == 0
                ? '  What are your interests and hobbies ?'
                : '  What are your personality traits ?',
            style: JcTextStyle.poetsenOneRegularTextStyle(15.sp, Colors.white),
          ),
        ),
        Container(
          height: 28.h,
          padding: EdgeInsets.only(left: 15.w, right: 15.w),
          decoration: BoxDecoration(
              color: const Color(0xFFD3E3FF),
              borderRadius: BorderRadius.circular(5.r)),
          child: TextField(
            controller:
                TextEditingController(text: type == 0 ? interests : traits),
            textInputAction: TextInputAction.done,
            // maxLength: 10,
            style: JcTextStyle.poetsenOneRegularTextStyle(
                12.sp, const Color(0xFF00346D)),
            decoration: const InputDecoration(
              hintText: '',
              contentPadding: EdgeInsets.zero,
              border: OutlineInputBorder(borderSide: BorderSide.none),
            ),
            onChanged: (v) {
              if (type == 0) {
                interests = v;
              } else {
                traits = v;
              }
            },
            onSubmitted: (v) {},
          ),
        )
      ],
    );
  }

  _optionWidget(int type) {
    String title = type == 0
        ? 'What kind of feeling or image do you want the network name to convey?'
        : type == 1
            ? 'Are there colours or symbols you particularly like?'
            : 'How long would you like the name\n to be?';
    List<Widget> childs = type == 0
        ? [
            _optionItemWidget('Hidden', 0),
            _optionItemWidget('Happy', 0),
            _optionItemWidget(' Melancholy', 0)
          ]
        : type == 1
            ? [
                _optionItemWidget('Random 10%', 1),
                _optionItemWidget('Random 20%', 1),
                _optionItemWidget(' Random 30%', 1)
              ]
            : [
                _optionItemWidget('Moderate', 2),
                _optionItemWidget('Average', 2),
                _optionItemWidget('Long', 2)
              ];
    return Column(
      children: [
        Container(
          margin: EdgeInsets.only(top: 5.h, bottom: 14.h),
          alignment: Alignment.centerLeft,
          child: Text(
            title,
            style: JcTextStyle.poetsenOneRegularTextStyle(15.sp, Colors.white),
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: childs,
        ),
        SizedBox(
          height: 10.h,
        )
      ],
    );
  }

  _optionItemWidget(String title, int type) {
    double itemW = (336.w - 30.w - 20.w) / 3.0;
    return Obx(() {
      Widget ww = const SizedBox();

      if (networkName.value == title ||
          particularlyName.value == title ||
          longName.value == title) {
        ww = Container(
          height: 28.h,
          width: itemW,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5.r),
            gradient: const LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Color(0xFF497DEA), Color(0xFF255BD9)],
            ),
          ),
          child: Text(
            title,
            style: JcTextStyle.poetsenOneRegularTextStyle(12, Colors.white),
          ),
        );
      } else {
        ww = Container(
          height: 28.h,
          width: itemW,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5.r),
            gradient: const LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Color(0xFFD3E3FF), Color(0xFFD3E3FF)],
            ),
          ),
          child: Text(
            title,
            style: JcTextStyle.poetsenOneRegularTextStyle(
                12, const Color(0xFF00346D)),
          ),
        );
      }
      return InkWell(
        child: ww,
        onTap: () {
          if (type == 0) {
            networkName.value = networkName.value == title ? '' : title;
          } else if (type == 1) {
            particularlyName.value =
                particularlyName.value == title ? '' : title;
          } else {
            longName.value = longName.value == title ? '' : title;
          }
        },
      );
    });
  }

  _generateWidget() {
    return InkWell(
      child: Container(
        height: 40.h,
        margin: EdgeInsets.only(
          left: 13.w,
        ),
        decoration: BoxDecoration(
            color: const Color(0xFF4A78C9),
            borderRadius: BorderRadius.circular(9.r),
            border: Border.all(
                width: 1, color: const Color.fromRGBO(255, 255, 255, 0.3))
            // color: Colors.red
            ),
        child: widget.freeCount > 0
            ? Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Start Generation',
                    style: JcTextStyle.poetsenOneRegularTextStyle(
                        14.sp, Colors.white),
                  ),
                  SizedBox(
                    width: 8.w,
                  ),
                  Image.asset(
                    JcImagePath.jcDiceGeIcon,
                    width: 20.w,
                    height: 20.w,
                  ),
                  Container(
                    height: 16.w,
                    width: 1,
                    margin: EdgeInsets.only(left: 12.w, right: 12.w),
                    decoration: BoxDecoration(
                        color: const Color.fromRGBO(255, 255, 255, 0.3),
                        borderRadius: BorderRadius.circular(1)),
                  ),
                  Text(
                    'Free x${widget.freeCount}',
                    style: JcTextStyle.poetsenOneRegularTextStyle(
                        14.sp, Colors.white),
                  ),
                ],
              )
            : Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Start Generation',
                    style: JcTextStyle.poetsenOneRegularTextStyle(
                        14.sp, Colors.white),
                  ),
                  SizedBox(
                    width: 8.w,
                  ),
                  Image.asset(
                    JcImagePath.jcDiceGeIcon,
                    width: 20.w,
                    height: 20.w,
                  ),
                  Container(
                    height: 16.w,
                    width: 1,
                    margin: EdgeInsets.only(left: 12.w, right: 12.w),
                    decoration: BoxDecoration(
                        color: const Color.fromRGBO(255, 255, 255, 0.3),
                        borderRadius: BorderRadius.circular(1)),
                  ),
                  Image.asset(
                    JcImagePath.jcMineZs,
                    width: 22.w,
                    height: 22.w,
                  ),
                  SizedBox(
                    width: 5.w,
                  ),
                  Text(
                    '10',
                    style: JcTextStyle.poetsenOneRegularTextStyle(
                        14.sp, Colors.white),
                  ),
                ],
              ),
      ),
      onTap: () {
        if (interests == '') {
          EasyLoading.showError('Enter interests and hobbies');
          return;
        }

        if (traits == '') {
          EasyLoading.showError('Enter personality traits');
          return;
        }

        if (networkName.value == '') {
          EasyLoading.showError(
              'What kind of feeling or image do you want the network name to convey?');
          return;
        }
        if (particularlyName.value == '') {
          EasyLoading.showError(
              'Are there colours or symbols you particularly like?');
          return;
        }
        if (longName.value == '') {
          EasyLoading.showError('How long would you like the name to be?');
          return;
        }
        if (widget.freeCount > 0) {
          ///免费生成下一步
          // JsRequest().costCoins(success: (res) {});
          widget.nextTap({
            'interests': interests,
            'traits': traits,
            'networkName': networkName.value,
            'particularlyName': particularlyName.value,
            'longName': longName.value
          });
        } else {
          if (widget.myCoins < 10) {
            ///金币不足
            EasyLoading.showError('coin account is insufficient');
            Future.delayed(const Duration(seconds: 2), () {
              JcGlobal.of(context).logReport({'page': 'purchase'});
              Get.toNamed(JcRotePath.jcPurchase);
            });
          } else {
            JsRequest.costCoins(success: (res) {
              NotificationCenter().postNotification('coinChange');
              widget.nextTap({
                'interests': interests,
                'traits': traits,
                'networkName': networkName.value,
                'particularlyName': particularlyName.value,
                'longName': longName.value
              });
            });
          }
        }
      },
    );
  }
}
